<template>
  <div>
    <input v-model="text" />
    <br />
    <button @click="playVoice">播放语音</button>
    <button @click="handleStop">停止语音</button>
  </div>
</template>
<script>
const synth = window.speechSynthesis
const msg = new SpeechSynthesisUtterance()
export default {
  data() {
    return {
      text: '',
    }
  },
  methods: {
    playVoice() {
      this.handleSpeak(this.text) // 传入需要播放的文字
    },
    // 语音播报的函数
    handleSpeak(text) {
      msg.text = text // 文字内容
      msg.lang = 'zh-CN' // 使用的语言:中文
      msg.volume = 1 // 声音音量：1
      msg.rate = 1 // 语速：1
      msg.pitch = 1 // 音高：1
      synth.speak(msg) // 播放
    },
    // 语音停止
    handleStop(e) {
      msg.text = e
      msg.lang = 'zh-CN'
      synth.cancel(msg)
    },
  },
}
</script>
